<template>
  <div v-resize-rf="onResize" class="d-table">
    <el-table
      ref="elTable"
      :data="list"
      header-row-class-name="d-table-header"
      :height="autoTableHeight"
      stripe
      @selection-change="onSelectionChange"
      @sort-change="onSortChange"
    >
      <el-table-column label="班级名称" prop="className" />

      <el-table-column label="班级代码" prop="classCode" />

      <el-table-column label="班级年份" prop="grade" sortable="custom" />

      <el-table-column label="培养层次" prop="dictCultivationLevel">
        <template #default="scope">
          <div>
            {{
              dictToName('cultivation_level', scope.row.dictCultivationLevel)
            }}
          </div>
        </template>
      </el-table-column>

      <el-table-column
        label="班级人数"
        prop="classHumanCount"
        sortable="custom"
      />

      <el-table-column label="所属学院" prop="collegeName" />

      <el-table-column label="所属系" prop="professionName" />

      <el-table-column align="center" label="操作" min-width="140">
        <template #default="scope">
          <el-button
            size="small"
            text
            type="info"
            @click="emits('detail', scope.row)"
          >
            查看
          </el-button>

          <el-button
            size="small"
            text
            type="primary"
            @click="emits('edit', scope.row)"
          >
            编辑
          </el-button>

          <el-button
            size="small"
            text
            type="danger"
            @click="emits('del', scope.row)"
          >
            删除
          </el-button>

          <el-button
            class="btn-blue"
            size="small"
            text
            type="primary"
            @click="emits('student', scope.row)"
          >
            班级学生管理
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
  import { initDict, dictToName } from '@/utils/dictToName.js'
  const emits = defineEmits([
    'detail',
    'edit',
    'del',
    'update:modelValue',
    'sortChange',
    'student',
  ])

  defineProps({
    list: {
      type: Array,
      default: () => {
        return []
      },
    },
    selection: {
      type: Array,
      default: () => {
        return []
      },
    },
  })

  initDict('cultivation_level')

  const autoTableHeight = ref(200)

  function onResize({ height }) {
    nextTick(() => {
      autoTableHeight.value = height
    })
  }

  function onSelectionChange(val) {
    const idx = val.map((item) => {
      return item.id
    })
    emits('update:modelValue', idx)
  }

  function onSortChange({ column, prop, order }) {
    let data = {
      orderByColumn: '',
      isAsc: '',
    }

    if (order === 'descending') {
      data = {
        orderByColumn: prop,
        isAsc: 'desc',
      }
    }

    if (order === 'ascending') {
      data = {
        orderByColumn: prop,
        isAsc: 'asc',
      }
    }

    emits('sortChange', data)
  }
</script>

<style lang="scss" scoped></style>
